<template>
    <div id="AddNewStudent">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <td>姓名</td>
                    <td>
                        <!-- <el-input v-model="studentInfo.name"></el-input> -->
                        <input name="姓名" v-model="studentInfo.name" v-validate="'required'" :class="{'input': true, 'is-danger': errors.has('姓名') }" type="text" placeholder="姓名">
                        <i v-show="errors.has('姓名')" class="fa fa-warning"></i>
                        <span v-show="errors.has('姓名')" class="help is-danger">{{ errors.first('姓名') }}</span>
                    </td>
                    <td>年龄</td>
                    <td>
                        <!-- <el-input v-model="studentInfo.age"></el-input> -->
                        <input name="年龄" v-model="studentInfo.age" v-validate="'required|numeric|age'" :class="{'input': true, 'is-danger': errors.has('年龄') }" type="text" placeholder="年龄">
                        <i v-show="errors.has('年龄')" class="fa fa-warning"></i>
                        <span v-show="errors.has('年龄')" class="help is-danger">{{ errors.first('年龄') }}</span>
                    </td>
                </tr>
                <tr>
                    
                    <td>电话</td>
                    <td>
                        <input name="电话" v-model="studentInfo.mobile" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('电话') }" type="text" placeholder="电话">
                        <i v-show="errors.has('电话')" class="fa fa-warning"></i>
                        <span v-show="errors.has('电话')" class="help is-danger">{{ errors.first('电话') }}</span>
                    </td>
                     <td>学历</td>
                    <td>
                        <el-select name="学历" v-model="studentInfo.education" placeholder="学历" @click.native="loadDataWithType('education')">
                                <el-option v-for="item in education "
                                :key="item.kvalue"
                                :label="item.kvalue"
                                :value="item.kkey"
                                ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>班级</td>
                    <td>
                        <el-select v-model="studentInfo.classId" @click.native="loadClassData">
                            <el-option v-for="(item,key) in schoolList" :key="key"
                                :label="item.className"
                                :value="item.id"
                            ></el-option>
                        </el-select>
                    </td>
                    <td>城市</td>
                    <td>
                        <el-select v-model="studentInfo.cityId" @click.native="loadCityData">
                            <el-option v-for="(item,key) in cityList" 
                            :key="key"
                            :label="item.cityName"
                            :value="item.id"
                            ></el-option>
                        </el-select>
                    </td>
                </tr>
                <tr>
                    <td>校区</td>
                    <td>
                        <!-- <el-select >
                            <el-option></el-option>
                        </el-select> -->
                    </td>
                    <td>咨询师</td>
                    <td>
                        <!-- <el-select>
                            <el-option></el-option>
                        </el-select> -->
                    </td>
                </tr>
                <tr>
                    <td>班主任</td>
                    <td>
                        <!-- <el-select >
                            <el-option></el-option>
                        </el-select> -->
                    </td>
                    <td>任课老师</td>
                    <td>
                        <!-- <el-select>
                            <el-option></el-option>
                        </el-select> -->
                    </td>
                </tr>
                <tr>
                    <td>教员进班反馈</td>
                    <td>
                        <!-- <el-select >
                            <el-option></el-option>
                        </el-select> -->
                    </td>
                    <td>访谈记录</td>
                    <td>
                        <!-- <el-select>
                            <el-option></el-option>
                        </el-select> -->
                    </td>

                </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td colspan="4" style="text-align:center">
                        <el-button type="danger" @click="cancel">取消</el-button>
                        <el-button type="primary" @click="submit">提交</el-button>
                    </td>
                </tr>
            </tfoot>
        </table>
    </div>
</template>

<script>
export default {

    data(){
        return {
            studentInfo: {
                name: '', 
                gender: '女',
                age: 10,
                education: '',//学历
                classId: '', //班级Id
                campusId:'', //校园ID
                cityId: '',//城市ID
                advisor: '',//advisor
                backgroundInfo:'',//背景信息
                headTeacher:'',//班主任
                courseTeacher:'',//任课老师
                fbFromCT:'',//教员反馈
                fbFromHT:''//教务反馈
            },
            education: [],
            cityList: [],
        }
    },
    computed: {
        schoolList(){
            return this.dataSource;
        }
    },
    methods: {
        cancel(){
            this.$router.go(-1)
        },
        submit(){
        },
        loadClassData(){
            var classDataURL = window.baseURL + "/backstage/classManage/findByPage?token="+this.$token;
            this.loadDataWithURL(classDataURL);
        },
        loadCityData(){
            var classDataURL = window.baseURL + "/backstage/city/findAllCity?token="+this.$token;
            var response = this.loadDataWithURL(classDataURL);
            response.then((resp)=>{
                this.cityList = resp.data.data.list.result;
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    #AddNewStudent{
         width: 100%;
        height: 100%;
        padding: 40px;
    }
</style>
